<script>
  $(document).ready(function(){
    $("#alertdiv").delay(5000).fadeOut(600);
  });
</script>
<% content_for :title, t("circuitverse.index.title") %>
<% set_meta_tags twitter: {
                   card: "summary_large_image",
                   title: yield(:title),
                   description: Rails.configuration.site_description,
                   image: {
                     src: "#{Rails.configuration.site_url}img/circuitverseBanner2.png",
                   },
                 } %>
<% set_meta_tags og: {
                   title: yield(:title),
                   image: "#{Rails.configuration.site_url}img/circuitverseBanner2.png",
                   description: Rails.configuration.site_description,
                   type: "article",
                   site_name: Rails.configuration.site_name,
                 } %>
<% if notice %>
  <div class="row" id='alertdiv'>
    <div class="alert alert-success alert-dismissible container text-center">
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="<%= t('close', default: 'Close') %>"></button>
      <h6><%= notice %></h6>
    </div>
  </div>
<% end %>
<%= render "announcements/announcement" %>
<div class="container">
  <div class="d-flex justify-content-center justify-content-lg-between">
    <div class="home-main-content d-flex flex-column gap-3 align-items-center align-items-lg-start text-center text-lg-start">
      <%= render Home::BadgeComponent.new(text: t("circuitverse.index.free_and_open_source")) %>
      <h1 class="m-0"><%= sanitize(t("circuitverse.index.main_heading_html")) %></h1>
      <p class="m-0"><%= t("circuitverse.index.main_description") %></p>
      <div class="d-flex flex-column flex-sm-row gap-4">
        <a class="home-primary-button" href="/simulator"><%= t("launch_simulator") %>
          <%= image_tag "svgs/arrowRight.svg", alt: "", class: "ms-2", aria: { hidden: true } %>
        </a>
        <a href="https://learn.circuitverse.org/" target="_blank" rel="noopener noreferrer" class="home-secondary-button"><%= t("circuitverse.index.explore_tutorials") %></a>
      </div>
      <div class="d-flex gap-2">
        <a class="home-link" href="/teachers"><%= t("circuitverse.index.for_teachers") %></a>
        <span class="green-dot">&bull;</span>
        <a class="home-link" href="/contribute"><%= t("circuitverse.index.for_contributors") %></a>
      </div>
    </div>
    <%= image_tag "homepage/new_homepage_sketch.png", alt: t("circuitverse.index.home_hero_image_alt"), class: "home-image-cover" %>
  </div>
  <div class="stats-section d-flex flex-column gap-4 my-5 py-5 rounded-4 w-100 align-items-center">
    <div class="d-flex flex-column text-center align-items-center gap-2">
      <%= render Home::BadgeComponent.new(text: t("circuitverse.index.stats.badge_content"), should_show_dot: false) %>
      <h2 class="fw-bold"><%= t("circuitverse.index.stats.heading") %></h2>
      <p class="stats-description"><%= t("circuitverse.index.stats.description") %></p>
    </div>
    <div class="stats-grid">
      <%= render Home::StatCardComponent.new(number: @stats[:circuits_count], label: t("circuitverse.index.stats.circuits_created")) %>
      <%= render Home::StatCardComponent.new(number: @stats[:users_count], label: t("circuitverse.index.stats.users")) %>
      <%= render Home::StatCardComponent.new(number: @stats[:universities_count], label: t("circuitverse.index.stats.universities")) %>
      <%= render Home::StatCardComponent.new(number: @stats[:countries_count], label: t("circuitverse.index.stats.countries")) %>
    </div>
  </div>
  <div class="d-flex flex-column gap-4 m-4 mb-0 align-items-center">
    <div class="d-flex flex-column text-center align-items-center gap-2">
      <%= render Home::BadgeComponent.new(text: t("circuitverse.index.features.badge_content"), should_show_dot: false) %>
      <h2 class="fw-bold"><%= t("circuitverse.index.features.everything_you_need_heading") %></h2>
      <p class="features-description"><%= t("circuitverse.index.features.main_description") %></p>
    </div>
    <div class="feature-card-grid">
      <% @features.each do |feature| %>
        <%= render Home::FeatureCardComponent.new(
          image_path: feature[:image_path],
          alt_text: feature[:alt_text],
          title: t(feature[:title_key]),
          description: t(feature[:description_key])
        ) %>
      <% end %>
    </div>
  </div>
</div>
<% if user_signed_in? %>
  <script>
    if(localStorage.getItem("recover_login")){
        window.location.href = "/simulator"
    }
  </script>
<% end %>
<script type="application/ld+json">
  {
    "@context" : "http://schema.org",
    "@type" : "WebApplication",
    "name" : "<%= Rails.configuration.site_name %>",
    "image" : "<%= Rails.configuration.site_image %>",
    "url" : "<%= Rails.configuration.site_url %>",
    "applicationCategory" : "<%= Rails.configuration.site_category %>",
    "downloadUrl" : "<%= Rails.configuration.site_download_url %>",
    "operatingSystem": "All"
  }
</script>
<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "url" : "<%= Rails.configuration.site_url %>",
    "potentialAction": {
      "@type": "SearchAction",
      "target": "<%= Rails.configuration.site_url %>/search?resource=Projects&q={search_term_string}",
      "query-input": "required name=search_term_string"
    }
  }
</script>
<!-- Bootstrap core JavaScript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
